<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--
  画布 html5的canvas元素使用javascript 在网页上绘制图像
  画布是一个矩形区域
  fillRect(0, 0, 150, 75);
  意思在画布上绘制150*75 的矩形 从左上角开始(0,0)
  配置svg 嵌入到html
    与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
    SVG 图像可通过文本编辑器来创建和修改
    SVG 图像可被搜索、索引、脚本化或压缩
    SVG 是可伸缩的
    SVG 图像可在任何的分辨率下被高质量地打印
    SVG 可在图像质量不下降的情况下被放大

  SVG
  SVG 是一种使用 XML 描述 2D 图形的语言。

  SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

  在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

  Canvas
  Canvas 通过 JavaScript 来绘制 2D 图形。

  Canvas 是逐像素进行渲染的。

  在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

  Canvas 与 SVG 的比较
  下表列出了 canvas 与 SVG 之间的一些不同之处。

  Canvas
  依赖分辨率
  不支持事件处理器
  弱的文本渲染能力
  能够以 .png 或 .jpg 格式保存结果图像
  最适合图像密集型的游戏，其中的许多对象会被频繁重绘
  SVG
  不依赖分辨率
  支持事件处理器
  最适合带有大型渲染区域的应用程序（比如谷歌地图）
  复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
  不适合游戏应用


多媒体
  多媒体来自多种不同的格式 它可以是您听到或看到的任何内容,文字 图片 音乐 音效 录音 电影 动画
  多媒体格式
多媒体元素（比如视频和音频）存储于媒体文件中。
确定媒体类型的最常用的方法是查看文件扩展名。当浏览器得到文件扩展名 .htm 或 .html 时，它会假定该文件是 HTML 页面。.xml 扩展名指示 XML 文件，而 .css 扩展名指示样式表。图片格式则通过 .gif 或 .jpg 来识别。
多媒体元素元素也拥有带有不同扩展名的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4。

视频格式
MP4 格式是一种新的即将普及的因特网视频格式。HTML5 、Flash 播放器以及优酷等视频网站均支持它。

格式	文件	描述
AVI	.avi	AVI (Audio Video Interleave) 格式是由微软开发的。所有运行 Windows 的计算机都支持 AVI 格式。它是因特网上很常见的格式，但非 Windows 计算机并不总是能够播放。
WMV	.wmv	Windows Media 格式是由微软开发的。Windows Media 在因特网上很常见，但是如果未安装额外的（免费）组件，就无法播放 Windows Media 电影。一些后期的 Windows Media 电影在所有非 Windows 计算机上都无法播放，因为没有合适的播放器。
MPEG
  .mpg
  .mpeg
MPEG (Moving Pictures Expert Group) 格式是因特网上最流行的格式。它是跨平台的，得到了所有最流行的浏览器的支持。
QuickTime	.mov	QuickTime 格式是由苹果公司开发的。QuickTime 是因特网上常见的格式，但是 QuickTime 电影不能在没有安装额外的（免费）组件的 Windows 计算机上播放。
RealVideo
.rm
.ram
RealVideo 格式是由 Real Media 针对因特网开发的。该格式允许低带宽条件下（在线视频、网络电视）的视频流。由于是低带宽优先的，质量常会降低。
Flash
.swf
.flv
Flash (Shockwave) 格式是由 Macromedia 开发的。Shockwave 格式需要额外的组件来播放。但是该组件会预装到 Firefox 或 IE 之类的浏览器上。
Mpeg-4	.mp4	Mpeg-4 (with H.264 video compression) 是一种针对因特网的新格式。事实上，YouTube 推荐使用 MP4。YouTube 接收多种格式，然后全部转换为 .flv 或 .mp4 以供分发。越来越多的视频发布者转到 MP4，将其作为 Flash 播放器和 HTML5 的因特网共享格式。

所有浏览器均支持 object 元素 object元素定义html文档中嵌入式对象
它将插件 java applet pdf阅读器 和flash播放器 嵌入网页
embed 元素 所有主要浏览器
  -->
  <style>
    myHero {
      display: block;
      background-color: #ddd;
      padding: 50px;
      font-size: 30px;
    }
  </style>
</head>
<body>
<myHero>显示的内容!</myHero>
<canvas id="myCanvas" width="200" height="100"></canvas>
<canvas id="myCanvas1" width="200" height="100" style="border: 1px solid #c3c3c3"></canvas>
<canvas id="myCanvas2" width="200" height="100" style="border: 1px solid #c3c3c3">Your browser does not support the canvas element</canvas>
<canvas id="myCanvas3" width="200" height="100" style="border: 1px solid #c3c3c3">Your browser does not support the canvas element</canvas>
<canvas id="myCanvas4" width="244" height="182" style="border: 1px solid #c3c3c3">Your browser does not support the HTML5 canvas tag.</canvas>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10,40,180 190,60 10,60 160,180" style="fill:lime;stroke: purple;stroke-width: 5;fill-rule: evenodd;"></polygon>
</svg>
<object data="/img/girl_hair_pink_1108892_1920x1080.jpg" width="1920" height="1080"></object>
<!--使用两个不同的音频格式 html5 <audio>元素会尝试以mp3或ogg来播放音频.如果失败,代码将回退尝试<embed>元素-->
<audio controls="controls" height="100" width="100">
    <source src="song.mp3" type="audio/mp3"/>
    <source src="song.ogg" type="audio/ogg"/>
    <embed src="song.mp3" height="100" width="100"/>
  Your browser does not support this audio format
</audio>
<!--最简单向网页添加音频的方法是 添加雅虎的媒体播放器 它能播放mp3以及一系列其他格式 通过一行简单的代码将html转变为专业的媒体播放列表
雅虎媒体播放器为您的用户提供是一个小型的播放按钮,而不是完整的播放器.当您点击该按钮,会弹出完整的播放器.
-->
<a href="song.mp3">Play Sound</a>
<br>
<!--视频播放器-->
<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4"/>
  <source src="movie.ogg" type="video/ogg"/>
  <source src="movie.webm" type="video/webm"/>
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240"/>
  </object>
</video>
<!--在html中播放youtube视频 自动播放 添加autoplay=1 来让视频在用户访问页面时自动开始播放,注意 大多数情况下 chrome不允许自动播放 但是始终允许静音自动播放 autoplay=1之后添加mute=1 可让您的视频自动播放但是已静音
添加 loop=1 会让视频永远循环 值 0 默认 :视频将播放一次 值1 视频 将循环 永远
添加 controls=0 会使视频播放器不显示控件 值0 播放器控件不显示 值1 播放器控件显示
-->
<iframe src="https://www.youtube.com/embed/ih1l6wb7LhU?autoplay=1&mute=1&controls=1&loop=1" frameborder="0" width="420" height="315"></iframe>
<script type="text/javascript" src="https://mediaplayer.yahoo.com/js">
<!--  javascript 使用id来寻找canvas元素 getContext("2d") 对象是内建的html5对象 -->
  var c = document.getElementById("myCanvas");
  var cxt = c.getContext("2d");
  cxt.fillStyle = "#FF0000";
  cxt.fillRect(0, 0, 150, 75);
  // 线条
  var c1 = document.getElementById("myCanvas1");
  var cxt1 = c1.getContext("2d");
  cxt1.moveTo(10,10);
  cxt1.lineTo(150,50);
  cxt1.lineTo(10,50);
  cxt1.stroke();
  // 圆点
  var c2=document.getElementById("myCanvas2");
  var cxt2=c2.getContext("2d");
  cxt2.fillStyle="#FF0000";
  cxt2.beginPath();
  cxt2.arc(70,18,15,0,Math.PI*2,true);
  cxt2.closePath();
  cxt2.fill();
  // 渐变
  var c3=document.getElementById("myCanvas3");
  var cxt3=c3.getContext("2d");
  var grd=cxt3.createLinearGradient(0,0,175,50);
  grd.addColorStop(0,"#FF0000");
  grd.addColorStop(1,"#00FF00");
  cxt3.fillStyle=grd;
  cxt3.fillRect(0,0,175,50);
  window.onload = function (){
    var canvas4 = document.getElementById("myCanvas4");
    var ctx4 = canvas4.getContext("2d");
    var img = document.getElementById("scream");
    ctx4.drawImage(img,10,10);
  };
  // 通过浏览器trick向html 添加任何新元素 向html添加了名为myHero 的新元素,并为其定义display样式
  document.createElement("myHero")
</script>
</body>
</html>
